<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->

    <!-- 体部 -->
    <div class="content">
      <!-- 体部上半部分 -->
      <div class="top">
        <!-- 轮播图 -->
        <div class="swipes">
          <div class="wrapper">
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in swipes" :key="item.id">
                <img :src="item.url" alt="" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <!-- 体部下半部分 -->
      <div class="bottom">
        <div class="wrapper">
          <div class="plate">
            <div class="plates1">
              <div class="top">
                <div class="left">新闻头条</div>
                <!-- <div class="right">更多&nbsp;>></div> -->
              </div>
              <div class="block">
                <el-carousel height="200px" direction="vertical" :autoplay="false">
                  <el-carousel-item v-for="item in swipes" :key="item.id">
                    <img :src="item.url" alt="" style="width: 100%; height: 88%;">
                    <h4 class="medium">{{ item.introduce }}</h4>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <div class="plates" v-for="cas in categories" :key="cas.category.id">
              <div class="top">
                <div class="left">{{cas.category.name}}</div>
                <div class="right" @click='toArticle(cas.category)'>更多&nbsp;>></div>
              </div>
              <div class="bottom">
              <ul>
                <!-- [{artlce:[]},{}] -->
                <li v-for="a in cas.aritcle" :key="a.id"><img src="@/assets/yxtx/dian2.jpg" alt="">{{ a.title }}</li>
              </ul>
            </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- /体部 -->
    
    <!-- 脚部 -->
    <Footer></Footer>
    <!-- /脚步 -->

  </div>
</template>
 
<script>
import { get, post } from "@/utils/request";
// import "@/style/iconfont/iconfont.css";
  export default {
   data() {
      return {
      swipes: [],
      categories: [],
    };
  },
  methods: {
    toArticle(item){
      // 编程式导航跳转
      this.$router.push({
        path:"/article",
        query:item
      })
    },
    async getSwiptes() {
      let res = await get("index/carousel/findAll");
      // console.log(res.data);
      this.swipes = res.data;
    },
    async getCategories() {
      // axios 请求 get post del
      let res = await get("/index/article/findCategoryArticles");
      // console.log(res, "获取响应");
      this.categories = res.data;
      //  [{category:{name:""},artilces:[]},{},{},{},{}]
    },
  },
  created() {
    this.getSwiptes();
    this.getCategories();
  },
};
</script>

<style lang='scss'>
  // 体部样式
.content {
  .bottom {
    .wrapper {
      .plate {
        display: flex;
        flex-wrap: wrap;
        .plates1 {
          width: 370px;
          height: 300px;
          background-color: #fff;
          margin-right: 25px;
          margin-bottom: 25px;
          margin-left: 25px;
          border: 1px solid #eeeeee;
          overflow: hidden;
          // border-top: 2px solid #a94c18;

          .top {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #698b00;

          .left {
            font-size: 18px;
            line-height: 50px;
            width: 40%;
            font-size: 20px;
            color: #333333;
          }

          // .right {
          //   font-size: 16px;
          //   line-height: 50px;
          //   color: #888;
          //   font-size: 12px;
          //   cursor: pointer;
          // }
          // .right:hover{
          //   text-decoration: underline;
          // }
        }

          .block {
            .medium {
              color: #2079d2;
              text-align: center;
              margin-top: 0px;
            }
          }
        }

        .plates {
          width: 370px;
          height: 300px;
          background-color: #fff;
          margin-right: 25px;
          margin-bottom: 25px;
          border: 1px solid #eeeeee;
          overflow: hidden;

            .top {
              display: flex;
              justify-content: space-between;
              border-bottom: 2px solid #a94c18;

            .left {
              font-size: 18px;
              line-height: 50px;
              width: 40%;
              font-size: 20px;
              color: #333333;
            }

            .right {
              font-size: 16px;
              line-height: 50px;
              color: #888;
              font-size: 12px;
              cursor: pointer;
            }
            .right:hover{
              text-decoration: underline;
            }
          }
            .bottom {
                margin-top: 10px;
                line-height: 30px;
            ul {
              li {
                // 文本省略号
                overflow: hidden; //多余的部分隐藏
                white-space: nowrap; //让文字强制一行显示
                text-overflow: ellipsis; //多余的部分显示省略号
                line-height: 40px;
                font-size: 12px;
                color: black;
                // cursor:pointer;
              }
              // li:hover{
              //   color: #990000;
              //   text-decoration: underline;
              // }
            }
          }
        }
        .plates:nth-child(3n) {
          margin-right: 0;
        }
        .plates:nth-child(3n+1) {
          margin-left: 25px;
        }
      }
    }
  }
}

</style>